<template>
  <uv-navbar title="" bg-color="transparent" leftText="返回" left-icon-color="#fff" autoBack></uv-navbar>
  <view class="container">
    <view class="main">
      <view class="main_head">
        <image src="/static/my/avatar.jpg" mode=""></image>
        <view class="main_head_right">
          <view>昵称</view>
          <text>学习报告 09/08~09/14</text>
        </view>
      </view>
      <view class="main_des">
        行动是治愈恐惧的良药
      </view>
      <view class="main_footer">
        <view class="main_footer_box">
          <text>本周学习时长</text>
          <view>
            <view>50</view>
            <text>分钟</text>
          </view>
        </view>
        <view class="main_footer_box">
          <text>本周完成课程</text>
          <view>
            <view>1</view>
            <text>节</text>
          </view>
        </view>
        <view class="main_footer_box">
          <text>最晚学习时间</text>
          <view>
            <view>21:18</view>
          </view>
        </view>
      </view>
      <view class="main_qcode">
        <view class="main_qcode_left">
          <view>知识区</view>
          <view>扫码与我一起学习</view>
        </view>
        <image src="/static/xuexibaogao/xiaochengxu.png" mode=""></image>
      </view>
    </view>
    <view class="footer">
      <image src="/static/xuexibaogao/fenxiang.png" mode=""></image>
      长按图片分享
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { onPageScroll } from '@dcloudio/uni-app'
  import { ref } from 'vue';

  const leftHandler = () => {
    uni.navigateBack({
      delta:1
    })
  }
</script>

<style lang="less" scoped>
  .container {
    width: 750rpx;
    height: 100%;
    background-image: url('/static/xuexibaogao/beijing.png');
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .main {
      width: 600rpx;
      height: 840rpx;
      background: #333333;
      border-radius: 20rpx;
      opacity: 0.8;
      color: #fff;
      display: flex;
      flex-direction: column;
      padding-left: 40rpx;
      padding-top: 50rpx;
      position: relative;

      &_head {
        display: flex;
        align-items: center;
        margin-bottom: 50rpx;

        image {
          width: 124rpx;
          height: 124rpx;
          background: #999999;
          border-radius: 50%;
          margin-right: 20rpx;
        }

        &_right {
          font-size: 28rpx;
          color: #EEEEEE;

          view {
            margin-bottom: 14rpx;
            font-size: 32rpx;
            color: #FFFFFF;
          }
        }
      }

      &_des {
        font-weight: 500;
        font-size: 32rpx;
        color: #FFFFFF;
        margin-left: 144rpx;
        margin-bottom: 92rpx;
      }

      &_footer {
        display: flex;
        flex-wrap: wrap;
        padding-left: 144rpx;

        &_box {
          flex: 0 0 50%;
          margin-bottom: 74rpx;
          font-size: 24rpx;
          color: #EEEEEE;

          >view {
            font-weight: bold;
            font-size: 44rpx;
            color: #FFFFFF;
            display: flex;
            align-items: flex-end;
            margin-top: 25rpx;

            text {
              font-size: 24rpx;
              color: #DDDDDD;
              margin-left: 20rpx;
            }
          }
        }
      }

      &_qcode {
        width: 100%;
        height: 171rpx;
        background: #1f1f1f;
        border-radius: 0 0 20rpx 20rpx;
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: space-between;
        padding: 0 45rpx;
        box-sizing: border-box;
        align-items: center;

        &_left {
          font-size: 28rpx;
          color: #fff;

          view {
            margin: 5rpx 0;
          }
        }

        image {
          width: 118rpx;
          height: 118rpx;
        }
      }
    }

    .footer {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: #FFFFFF;
      padding-top: 50rpx;
      opacity: 0.8;

      image {
        width: 32rpx;
        height: 32rpx;
        margin-right: 10rpx;
      }
    }
  }
</style>